<template>
    <div>
        <el-container>
            <el-header style="background-color: #06b6ff;display: flex;align-items: center;justify-content: space-between">
                <div style="font-family: 华文行楷;font-size: 30px;color: orange">臭dd国际物流管理系统</div>
                <div>
                    <el-dropdown style="cursor:pointer;" @command="menuCmd">
  <span class="el-dropdown-link">
    {{user.username}}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="setting">设置</el-dropdown-item>
                            <el-dropdown-item command="usercenter">个人中心</el-dropdown-item>
                            <el-dropdown-item command="logout" divided>注销登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-header>


            <el-container>
                <el-aside width="200px">
                    <!--@select: 页面跳转点击事件
                    unique-opened: 点击菜单多余的自动收缩
                    -->
                <el-menu @select="menuSelect" unique-opened>

                    <!--遍历子级菜单 加冒号 表示其为 变量 v-if="!item.hidden" : 判断为true 就隐藏该对应的菜单-->
                    <template v-for="(item,index) in this.$router.options.routes" v-if="!item.hidden">

                    <el-submenu :index="index + ''" :key="index" v-if="item.meta.role.indexOf(user.role.rolename)!= -1">
                        <template slot="title">
                            <!--图标-->
                            <i class="el-icon-location"></i>
                            <!--获取分组名-->
                            <span>{{item.name}}</span>
                        </template>         <!--遍历分组中children的name 并获取赋值-->
                            <el-menu-item :index="child.path" v-for="(child,indexj) in item.children" :key="indexj">
                                {{child.name}}
                            </el-menu-item>
                    </el-submenu>
                    </template>
                 </el-menu>

             </el-aside>
         <el-main>
             <!--导航栏 面包屑-->
             <el-breadcrumb separator-class="el-icon-arrow-right"

                            v-show="this.$router.currentRoute.path !='/home'"><!--判断导航栏不等于"/home" 就显示-->
                 <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                 <el-breadcrumb-item>{{this.$router.currentRoute.name}}</el-breadcrumb-item>
             </el-breadcrumb>                                                                            <!--判断该div等于"/home" 就显示-->
             <div style="font-family: 华文行楷;font-size: 30px;text-align: center;color: blue" v-show="this.$router.currentRoute.path =='/home'">
                 欢迎来到臭dd国际物流管理系统~
             </div>
             <router-view/>
         </el-main>

      </el-container>

   </el-container>

 </div>

</template>

<script>
    import {getRequest} from "../utils/api";

    export default {
        name: "Home",
        data() {
            return{
                /*拿到后台存入subject的user 字符串*/
                user:JSON.parse(window.sessionStorage.getItem("user"))
            }
            },
            methods:{ /*属性 允许多个*/
                menuSelect(index ,indexPath){ /*点击事件 页面跳转*/
                    this.$router.push(index);
                },
                menuCmd(cmd) {
                    if (cmd == 'logout') {
                    this.$confirm('此操作将注销登录, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        getRequest('/logout');
                        /*注销登录后清除用户信息*/
                        window.sessionStorage.removeItem("user");
                        this.$router.replace('/');
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                }
            }
        }
    }
</script>

<style scoped>

</style>